<template>
	<view class="page">
		<!-- 顶部固定栏 -->
		<view class="header">
			<view class="search-box">
				<uni-icons type="search" size="20" color="#666"></uni-icons>
				<input type="text" placeholder="搜索商品" placeholder-class="search-placeholder" />
			</view>
			<view class="cart-icon">
				<uni-icons type="cart" size="24" color="#666"></uni-icons>
			</view>
		</view>

		<!-- 内容区域 -->
		<scroll-view scroll-y class="content">
			<!-- 分类导航 -->
			<scroll-view scroll-x class="category-nav">
				<view class="nav-item" v-for="(item, index) in categories" :key="index"
					:class="{ active: currentCategory === index }" @tap="selectCategory(index)">
					{{ item }}
				</view>
			</scroll-view>

			<!-- 商品列表 -->
			<view class="product-list">
				<view class="product-item" v-for="(item, index) in products" :key="index">
					<view class="product-card">
						<image class="product-image" :src="item.image" mode="aspectFill"></image>
						<view class="product-info">
							<text class="product-title">{{ item.title }}</text>
							<text class="product-desc">{{ item.desc }}</text>
							<view class="product-bottom">
								<text class="product-price">¥{{ item.price }}</text>
								<view class="add-cart-btn">
								<uni-icons type="plus" size="20" color="#FFFFFF"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script lang="ts" setup>
	import { ref } from 'vue';
	const currentTab = ref(1);
	const currentCategory = ref(0);
	const categories = ['全部', '食品', '玩具', '清洁', '医疗', '服饰'];
	const selectCategory = (index : number) => {
		currentCategory.value = index;
	};
	const products = [
		{
			title: '优质猫粮 10kg',
			desc: '天然无谷物配方',
			price: '299',
			image: 'https://ai-public.mastergo.com/ai/img_res/de47df3592a2070da76868af792200dd.jpg'
		},
		{
			title: '狗狗磨牙玩具',
			desc: '耐咬无毒材质',
			price: '49',
			image: 'https://ai-public.mastergo.com/ai/img_res/7b7301f240f4a1fdbb6694cb1f3273bd.jpg'
		},
		{
			title: '猫咪按摩梳',
			desc: '舒适除毛工具',
			price: '68',
			image: 'https://ai-public.mastergo.com/ai/img_res/91e2f8908636e7a5ee7e4f50b88fb475.jpg'
		},
		{
			title: '宠物智能喂食器',
			desc: '自动定时投食',
			price: '399',
			image: 'https://ai-public.mastergo.com/ai/img_res/4db5ab26233a74ccc18f340ea95a0c2f.jpg'
		}
	];

	const tabs = [
		{ text: '首页', icon: 'home' },
		{ text: '商店', icon: 'shop' },
		{ text: '刷宠物', icon: 'heart' },
		{ text: '消息', icon: 'chat' },
		{ text: '我的', icon: 'person' }
	];
</script>
<style>
	page {
		height: 100%;
	}

	.page {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #F8F9FA;
	}

	.header {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		flex-shrink: 0;
	}

	.search-box {
		flex: 1;
		display: flex;
		align-items: center;
		background-color: #F1F3F5;
		border-radius: 32rpx;
		padding: 12rpx 24rpx;
	}

	.search-box input {
		flex: 1;
		font-size: 14px;
		margin-left: 12rpx;
	}

	.search-placeholder {
		color: #ADB5BD;
	}

	.cart-icon {
		padding: 10rpx;
		margin-left: 20rpx;
	}

	.content {
		flex: 1;
		overflow: auto;
	}

	.category-nav {
		padding: 20rpx 0;
		background-color: #FFFFFF;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.nav-item {
		display: inline-block;
		padding: 16rpx 32rpx;
		font-size: 14px;
		color: #495057;
		position: relative;
	}

	.nav-item.active {
		color: #FF6B6B;
		font-weight: bold;
	}

	.nav-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #FF6B6B;
		border-radius: 2rpx;
	}

	.product-list {
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.product-item {
		width: 50%;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.product-card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.product-image {
		width: 100%;
		height: 320rpx;
		background-color: #F8F9FA;
	}

	.product-info {
		padding: 20rpx;
	}

	.product-title {
		font-size: 14px;
		font-weight: bold;
		color: #212529;
		margin-bottom: 8rpx;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.product-desc {
		font-size: 12px;
		color: #868E96;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 16rpx;
	}

	.product-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-price {
		font-size: 16px;
		font-weight: bold;
		color: #FF6B6B;
	}

	.add-cart-btn {
		width: 40rpx;
		height: 40rpx;
		background-color: #FF6B6B;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tab-bar {
		display: flex;
		justify-content: space-around;
		padding: 16rpx 0;
		background-color: #FFFFFF;
		border-top: 1px solid #F1F3F5;
		flex-shrink: 0;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tab-text {
		font-size: 12px;
		color: #868E96;
		margin-top: 8rpx;
	}

	.tab-item.active .tab-text {
		color: #FF6B6B;
	}
</style>